<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        /* 去掉图片底部缝隙 */
        img {
            vertical-align: bottom;
        }

        .w {
            width: 1200px;
            margin: 0 auto;
        }

        .banner {
            height: 400px;
            position: relative;
            /* 超出banner的内容隐藏 */
            overflow: hidden;
            margin-top: 50px;
        }

        .banner .arrow_left {
            width: 36px;
            height: 44px;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -22px;
            z-index: 1;
            cursor: pointer;
        }

        .banner .arrow_right {
            width: 36px;
            height: 44px;
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -22px;

            z-index: 1;
            cursor: pointer;
        }

        /* 为什么要给ul设置600%的宽度,因为我们需要把所有的li浮动成一行,ul必须有足够的宽度才可以放得下 */
        .banner ul {
            /* width:600%; */
            /* 因为手动复制了添加了一个li到ul的子元素列表后面,这个时候ul里面就有7个li */
            /* width: 700%; */

            /* 如果想要让ul可以移动,需要给ul设置绝对定位 */
            position: absolute;
            left: 0;
            top: 0;
        }

        .banner ul li {
            float: left;
        }

        .banner .circle {
            position: absolute;
            bottom: 20px;
            left: 50%;
            width: 120px;
            margin-left: -60px;
        }

        .banner .circle li {
            width: 10px;
            height: 10px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            float: left;
            margin-right: 10px;
            /* 鼠标模拟手势 */
            cursor: pointer;
        }

        /* 为了后面可以点击li高亮 */
        /* .banner .circle li:first-child{
            width: 20px;
            border-radius: 10px;
        } */
        /* 我们单独定义一个类名 .current  */
        .banner .circle .current {
            width: 20px;
            border-radius: 10px;
        }

        .banner .circle li:last-child {
            margin-right: 0;
        }

        .active {
            background-color: greenyellow;
        }

        ol {
            width: 150px;
            height: 20px;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 15px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        ol li {
            width: 15px;
            height: 15px;
            background-color: ivory;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="banner w">
        <img src="images/prev.png" class="arrow_left" />
        <img src="images/next.png" class="arrow_right" />
        <ul>
            <li><a href="#"><img src="images/banner01.jpg"></a></li>
            <li><a href="#"><img src="images/banner02.jpg"></a></li>
            <li><a href="#"><img src="images/banner03.jpg"></a></li>
            <li><a href="#"><img src="images/banner04.jpg"></a></li>
            <li><a href="#"><img src="images/banner05.jpg"></a></li>
            <li><a href="#"><img src="images/banner06.jpg"></a></li>
        </ul>
        <ol class="circle">

        </ol>
    </div>

    <script>
        //轮播图 ，做出点击左右按钮切换
        let ul = document.querySelector("ul");
        let ol = document.querySelector('ol')
        let wrap = document.querySelector(".banner");
        let wrap_width = wrap.clientWidth;
        const frg = document.createDocumentFragment()
        for (let i = 0; i < ul.children.length; i++) {
            let focus = document.createElement('li')
            frg.appendChild(focus)
            if (i == 0) focus.className = 'active'
        }
        ol.appendChild(frg)
        let first = ul.firstElementChild.cloneNode(true);
        let last = ul.lastElementChild.cloneNode(true);
        ul.appendChild(first);
        ul.insertBefore(last, ul.firstElementChild);
        ul.style.width = ul.children.length * 100 + '%';
        ul.style.left = -wrap_width + 'px';
        let index = 1;
        autoplay()
        function autoplay() {
            move_time = setInterval(() => {
                index++
                move(ul, 'left', -index * wrap_width, movend)
            }, 2000)
        }
        function move(ele, type, value, cb) {
            let spe = parseInt(getComputedStyle(ele)[type])
            change_timer = setInterval(() => {
                value > spe ? spe += 5 : spe -= 5
                ele.style[type] = spe + 'px'
                if (value > spe) {
                    if (spe >= value) {
                        clearInterval(change_timer)
                        cb()
                    }
                } else {
                    if (spe <= value) {
                        clearInterval(change_timer)
                        cb()
                    }
                }
            }, 10)
        }
        function movend() {
            if (index >= ul.children.length - 1) {
                index = 1
                ul.style.left = -index * wrap_width + 'px'
            }
            if (index <= 0) {
                index = ol.children.length - 1
                ul.style.left = -index * wrap_width + 'px'
            }
            for (let i = 0; i < ol.children.length; i++) {
                ol.children[i].className = ''
            }
            ol.children[index - 1].className = 'active'
        }
        wrap.onmouseover = () => clearInterval(move_time)
        wrap.onmouseout = () => autoplay()
        let left = document.querySelector(".arrow_left");
        let right = document.querySelector(".arrow_right");
        left.onclick = function () {
            index--;
            move(ul, 'left', -index * wrap_width, movend)
        }
        right.onclick = function () {
            index++;
            move(ul, 'left', -index * wrap_width, movend)
        }
        for (let i = 0; i < ol.children.length; i++) {
            //获取焦点索引
            ol.children[i].id = i
            //点击焦点切换图片
            ol.children[i].onclick = function () {
                index = this.id - 0 + 1
                move(ul, 'left', -index * wrap_width, movend)
            }
        }
        if (flag) return
        flag = true
    </script>
</body>

</html>